import React from 'react'
import { Input } from 'antd';
import CalculatorModal from 'containers/financial-account/template/calculator-modal';
import {messages} from "share/common";

class Calculator extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      showModal: false,
      value: ''
    }
  }

  componentWillMount() {
    this.setState({value: this.props.value});
  }

  onChange = () => {
    const { value } = this.state, { onChange } = this.props;
    if(onChange){
      onChange(value);
    }
  };

  componentWillReceiveProps(nextProps) {
    nextProps.value && this.setState({value: nextProps.value});
  }

  handleFocus = () => {
    this.refs.calRef.focus();
    this.showList()
  };

  showList = () => {
    this.setState({  showModal: true })
  };

  onCancel = () => {
    this.setState({showModal: false})
  };

  onOk = (value) => {
    this.setState({
      showModal: false,
      value
    },() => {
      this.onChange();
    });
  };

  render(){
    const { showModal, value } = this.state;
    const { disabled, infoData, treeList } = this.props;
    return(
      <div>
        <Input onFocus={this.handleFocus} disabled={disabled} placeholder={messages('common.please.enter')/*请输入*/} value={value}/>
        <CalculatorModal visible={showModal}
                         infoData={infoData}
                         treeList={treeList}
                         value={value}
                         onOk={this.onOk}
                         onCancel={this.onCancel}/>
        <div><input ref="calRef" style={{opacity: 0, position: 'fixed', width:0, height:0, zIndex: -1}}/></div>
      </div>
    )
  }
}

Calculator.propTypes = {
  disabled: React.PropTypes.bool,
  infoData: React.PropTypes.object,
  treeList: React.PropTypes.array,
  onChange: React.PropTypes.func
};

Calculator.defaultProps = {
  disabled: false,
  infoData: {}
};

export default Calculator
